<template>
  <div class="filter">
    <div class="flex mb-20">
      <span class="label mr-12" style="color: #999">位置：</span>
      <span v-for="item in regionList" :key="item.id" :class="{ active: region_id === item.id }" class="fliter-item mr-12 cursor-p" @click="tapSelect('region_id', item.id)">{{ item.address }}</span>
    </div>
    <div class="flex mb-20" style="padding-left: 54px" v-if="regionDisList.length">
      <span v-for="item in regionDisList" :key="item.id" :class="{ active: region_dis_id === item.id }" class="fliter-item mr-12 cursor-p" @click="tapSelect('region_dis_id', item.id)">
        {{ item.name }}
      </span>
    </div>
    <div class="flex mb-20">
      <span class="label mr-12" style="color: #999">面积：</span>
      <span v-for="item in areaList" :key="item.title" :class="{ active: activeArea === item.title }" class="fliter-item mr-12 cursor-p" @click="tapSelect('activeArea', item.title)">{{
        item.title
      }}</span>
    </div>
    <div class="flex mb-20">
      <span class="label mr-12" style="color: #999">价格：</span>
      <span v-for="item in unitPriceList" :key="item.title" :class="{ active: activeUnitPrice === item.title }" class="fliter-item mr-12 cursor-p" @click="tapSelect('activeUnitPrice', item.title)">{{
        item.title
      }}</span>
    </div>
    <div class="flex mb-20">
      <span class="label mr-12" style="color: #999">装修：</span>
      <span v-for="item in indecList" :key="item.id" :class="{ active: indec_id === item.id }" class="fliter-item mr-12 cursor-p" @click="tapSelect('indec_id', item.id)">{{ item.name }}</span>
    </div>
    <div class="flex mb-20">
      <span class="label mr-12" style="color: #999">特色：</span>
      <el-checkbox-group v-model="feature_id" @change="checkboxChange">
        <el-checkbox v-for="item in featureList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <!-- <span
        v-for="item in featureList"
        :key="item.id"
        :class="{ active: feature_id === item.id }"
        class="fliter-item mr-12 cursor-p"
        @click="tapSelect('feature_id', item.id)"
        >{{ item.name }}</span
      > -->
    </div>
  </div>
</template>

<script>
import { getApiBaseOptionList } from '@/api'
export default {
  props: {
    areaId: {
      type: String
    },
    regionId: {
      type: String
    }
  },
  data() {
    return {
      // 类型
      // cateList: [
      //   {
      //     id: 1,
      //     is_option: 1,
      //     m_link: '/m/index/tolist',
      //     name: '写字楼',
      //     pc_link: '/offices',
      //     thumb: '46',
      //   },
      // ],
      // 特色
      featureList: [{ id: 1, name: '可注册' }],
      // 装修
      indecList: [{ id: 1, name: '豪华装修' }],
      // 位置
      regionList: [
        {
          address: '福田区',
          id: 1,
          region_dis: [
            {
              id: 2,
              is_top: '1',
              name: '车公庙',
              region_id: 1,
              thumb: '56'
            }
          ]
        }
      ],
      regionDisList: [],
      // 面积
      areaList: [
        {
          min: '0',
          max: '100',
          title: '0-100㎡'
        }
      ],
      // 单价
      unitPriceList: [
        {
          min: '0',
          max: '100',
          title: '0-100㎡'
        }
      ],
      indec_id: 0,
      feature_id: [],
      region_id: 0,
      region_dis_id: 0,
      activeArea: '全部',
      min_area: '',
      max_area: '',
      activeUnitPrice: '全部',
      min_dan_price: '',
      max_dan_price: ''
    }
  },
  watch: {
    region_id(newval) {
      if (newval) {
        const arr = this.regionList.filter((item) => item.id === +newval)[0].region_dis
        this.regionDisList = arr
      } else {
        this.regionDisList = []
      }
    }
  },
  created() {
    this.getOptionList()
  },
  methods: {
    getOptionList() {
      getApiBaseOptionList().then((res) => {
        if (res.code === 200) {
          const { cate, feature, indec, region, unit_price, area } = res.data
          // { id: 0, name: '全部' },
          this.featureList = [...feature]
          this.indecList = [{ id: 0, name: '全部' }, ...indec]
          this.regionList = [{ address: '全部', id: 0 }, ...region]
          this.unitPriceList = [
            {
              min: '',
              max: '',
              title: '全部'
            },
            ...unit_price
          ]
          this.areaList = [
            {
              min: '',
              max: '',
              title: '全部'
            },
            ...area
          ]
          if (this.areaId !== null) {
            this.region_id = +this.areaId || 0
          }
          if (this.regionId !== null) {
            this.region_dis_id = +this.regionId || 0
          }
        }
      })
    },
    tapSelect(type, id) {
      this[type] = id
      switch (type) {
        case 'activeArea':
          const { min: min_area, max: max_area } = this.areaList.filter((item) => item.title === id)[0]
          this.min_area = min_area
          this.max_area = max_area
          break
        case 'activeUnitPrice':
          const { min: min_dan_price, max: max_dan_price } = this.unitPriceList.filter((item) => item.title === id)[0]
          this.min_dan_price = min_dan_price
          this.max_dan_price = max_dan_price
          break
        default:
          break
      }
      this.$emit('select', {
        feature_id: this.feature_id,
        indec_id: this.indec_id,
        region_id: this.region_id,
        region_dis_id: this.region_dis_id,
        min_area: this.min_area,
        max_area: this.max_area,
        min_dan_price: this.min_dan_price,
        max_dan_price: this.max_dan_price
      })
    },
    checkboxChange() {
      this.$emit('select', {
        feature_id: this.feature_id,
        indec_id: this.indec_id,
        region_id: this.region_id,
        region_dis_id: this.region_dis_id,
        min_area: this.min_area,
        max_area: this.max_area,
        min_dan_price: this.min_dan_price,
        max_dan_price: this.max_dan_price
      })
    }
  }
}
</script>

<style lang="less" scoped>
.filter {
  padding: 48px 0;
  .fliter-item {
    &.active {
      color: #ff9700;
    }
  }
  .cursor-p {
    cursor: pointer;
  }
  .mr-12 {
    margin-right: 12px;
  }
  .mb-20 {
    margin-bottom: 20px;
  }
}
</style>
